import React, { Component } from "react";

class App extends Component {
  state = {
    textValue: "123",
    areaValue: "abc",
    selectValue: "2",
  };

  handleChange1 = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };

  handleChange2 = (e) => {
    this.setState({
      areaValue: e.target.value,
    });
  };

  handleChange3 = (e) => {
    this.setState({
      selectValue: e.target.value,
    });
  };

  render() {
    return (
      <>
        <h2>表单</h2>
        <h5>普通文本框</h5>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange1}
        />
        <p>{this.state.textValue}</p>

        <hr />

        <h5>多行文本框</h5>
        <textarea
          value={this.state.areaValue}
          onChange={this.handleChange2}
        ></textarea>
        <p>{this.state.areaValue}</p>

        <hr />

        <h5>下拉框</h5>
        <select value={this.state.selectValue} onChange={this.handleChange3}>
          <option value="1">男</option>
          <option value="2">女</option>
          <option value="3">未知</option>
        </select>
        <p>{this.state.selectValue}</p>
      </>
    );
  }
}

export default App;
